<template>
    <div>
        <!-- 查询条件开始 -->
        <el-card shadow="always">
            <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
                <el-form-item label="所属部门" prop="deptId">
                    <el-select
                            v-model="queryParams.deptId"
                            placeholder="请选择部门"
                            clearable
                            size="small"
                            style="width:240px"
                    >
                        <el-option
                                v-for="dict in deptOptions"
                                :key="dict.deptId"
                                :label="dict.deptName"
                                :value="dict.deptId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户姓名" prop="userName">
                    <el-input
                            v-model="queryParams.userName"
                            placeholder="请输入用户姓名"
                            clearable
                            size="small"
                            style="width:240px"
                    />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input
                            v-model="queryParams.phone"
                            placeholder="请输入手机号"
                            clearable
                            size="small"
                            style="width:240px"
                    />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select
                            v-model="queryParams.status"
                            placeholder="可用状态"
                            clearable
                            size="small"
                            style="width:240px"
                    >
                        <el-option
                                v-for="dict in statusOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                            v-model="queryParams.dateRange"
                            size="small"
                            style="width:240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholde="开始日期"
                            end-placeholde="结束日期"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格工具按钮开始 -->
            <el-row :gutter="10" style="margin-bottom: 8px;">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete" size="mini">批量删除</el-button>
                </el-col>
            </el-row>
            <!-- 表格工具按钮结束 -->
            <!-- 数据表格开始 -->
            <el-table v-loading="loading" border :data="userTableList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="邮箱">
                                <span>{{ props.row.email }}</span>
                            </el-form-item>
                            <el-form-item label="擅长">
                                <span>{{ props.row.strong }}</span>
                            </el-form-item>
                            <el-form-item label="荣耀">
                                <span>{{ props.row.honor }}</span>
                            </el-form-item>
                            <el-form-item label="简介">
                                <span>{{ props.row.introduction }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="用户ID" align="center" prop="userId"/>
                <el-table-column label="用户姓名" align="center" prop="userName"/>
                <el-table-column label="部门" align="center" prop="deptId" :formatter="deptFormatter"/>
                <el-table-column label="手机号码【登陆身份】" width="180" align="center" prop="phone"/>
                <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormatter"/>
                <el-table-column label="年龄" align="center" prop="age"/>
                <el-table-column label="是否排班" align="center" prop="schedulingFlag"
                                 :formatter="schedulingFlagFormatter"/>
                <el-table-column label="级别" prop="userRank" align="center" :formatter="userRankFormatter"/>
                <el-table-column label="背景" prop="background" align="center" :formatter="backgroundFormatter"/>
                <el-table-column label="状态" prop="status" align="center" :formatter="statusFormatter"/>
                <el-table-column label="创建时间" align="center" prop="createTime" width="200"/>
                <el-table-column label="操作" align="center" width="250">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改
                        </el-button>
                        <el-button v-if="scope.row.userId!=1" type="text" icon="el-icon-delete" size="mini"
                                   @click="handleDelete(scope.row)">删除
                        </el-button>
                        <el-button v-if="scope.row.userId!=1" type="text" icon="el-icon-thumb" size="mini"
                                   @click="handleSelectRole(scope.row)">分配角色
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 数据表格结束 -->
        </el-card>
        <!-- 查询条件结束 -->
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
                //查询条件对象
                queryParams: {
                    current: 1,
                    pageSize: 5
                },
                //所有部门信息
                deptOptions: [],
                //所有的状态
                statusOptions: [],
                //所有的学历
                backgroundOptions: [],
                userRankOptions: [],
                sexOptions: [],
                schelingOptions:[],
                userTableList: undefined,
                total: undefined,
            }
        },
        created() {
            //加载所有部门
            this.loadDept();
            //加载状态
            this.loadStatus();
            //加载所有的级别
            this.loadUserRank();
            //加载所有的学历
            this.loadBackground();
            //加载所有的性别
            this.loadSex();
            //加载所有的性别
            this.loadScheling();
            //加载所有的用户信息
            this.loadUser();
        },
        methods: {
            //格式化部门信息
            deptFormatter(row) {
                var deptId = row.deptId;
                var name = "";
                this.deptOptions.forEach(item => {
                    if (item.deptId === deptId) {
                        name = item.deptName;
                    }
                })
                return name;
            },
            //格式化性别
            sexFormatter(row){
                var sex = row.sex;
                return this.getDictData(this.sexOptions,sex);
            },
            //是否排班
            schedulingFlagFormatter(row){
                return this.getDictData(this.schelingOptions,row.schedulingFlag);
            },
            //级别
            userRankFormatter(row){
                return this.getDictData(this.userRankOptions,row.userRank)
            },
            //学历
            backgroundFormatter(row){
                return this.getDictData(this.backgroundOptions,row.background);
            },
            statusFormatter(row){
                return this.getDictData(this.statusOptions,row.status);
            },


            loadSex() {
                this.$http.get("/system/api/dictData/sys_user_sex").then(result => {
                    this.sexOptions = result.data.data;
                })
            },
            loadScheling() {
                this.$http.get("/system/api/dictData/is_scheling").then(result => {
                    this.schelingOptions = result.data.data;
                })
            },
            loadUserRank() {
                this.$http.get("/system/api/dictData/sys_user_level").then(result => {
                    this.userRankOptions = result.data.data;
                })
            },

            loadBackground() {
                this.$http.get("/system/api/dictData/sys_user_background").then(result => {
                    this.backgroundOptions = result.data.data;
                })
            },


            loadUser() {
                this.$http.post("/system/api/user/findUserByCond", this.queryParams).then(result => {
                    this.userTableList = result.data.data.records;
                    this.total = result.data.data.total;
                });
            },
            loadDept() {
                this.$http.get("/system/api/dept/getAll").then(result => {
                    this.deptOptions = result.data.data;
                })
            },
            loadStatus() {
                this.$http.get("/system/api/dictData/sys_normal_disable").then(result => {
                    this.statusOptions = result.data.data;
                })
            },

            handleQuery() {
                this.loadUser();
            },
            resetQuery() {

            }
        }
    }
</script>

<style scoped>

</style>
